<template>
	<MiDialog @close="cancel()">
		<div class="header" slot="a">
			<span>提示！</span>
		</div>
s		<p slot="b" v-text="text"></p>
	<template slot="c">
		<button @click="ok">确定</button>
		<button @click="cancel">取消</button>
	</template>
	</MiDialog>
</template>

<script>
        import MiDialog from '../MiDialog/MiDialog.vue'
        export default{
                name:"MiConfirm",
                components:{MiDialog},
                data(){
                        return{
                                text:'',
	                        resolve:null,
	                        reject:null,
                        }
                },
	        methods:{
                        ok(){
                                this.resolve();
                                this.$destroy(true);
                                document.body.removeChild(this.$el)
                        },
		        cancel(){
                                this.reject();
                                this.$destroy(true);
                                document.body.removeChild(this.$el)
		        }
	        }
        }
</script>

<style scoped>
	.header{
		text-align: center;
		margin-top: 15px;
	}
	.header span{
		color: rgb(51, 51, 51);
		font-size: 20px;
	}
	p{
		color: rgb(51, 51, 51);
		font-size: 17px;
		padding: 17px;
	}
	.content{
		text-align: center;
		margin-top: 15px;
	}
	.content span{
		font-size: 14px;
	}
	.footer{
		border: 0px solid black;
		border-color: rgb(242, 242, 242);
		border-top-width: 2px;
		margin-top: 20px;
	}
	.footer button{
		border: 0px solid black;
		border-color: rgb(242, 242, 242);
		border-right-width: 2px;
		height: 51px;
		width: 157.5px;
		background-color: #fff;
		font-size: 14px;
	}
	.footer button:first-child{
		color: rgb(132, 95, 63);
	}
	.footer button:last-child{
		color: rgb(153, 153, 153);
	}
</style>